---
title: "Rich Select Cell Editor"
enterprise: true
---

An alternative to using the browser's `select` popup for dropdowns inside the grid.

The Rich Select Cell Editor allows users to enter a cell value from a list of provided values by searching or filtering the list.

## Enabling Rich Select Cell Editor

Edit any cell in the grid below to see the Rich Select Cell Editor.

{% gridExampleRunner title="Rich Select Editor" name="rich-select-editor" /%}

Enabled with `agRichSelectCellEditor` and configured with `IRichCellEditorParams`.

```js
columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            values: ['English', 'Spanish', 'French', 'Portuguese', '(other)'],
        }
        // ...other props
    }
]
```

Benefits over browser's `select` are as follows:

* Uses DOM row virtualisation so very large lists can be displayed.
* Integrates with the grid perfectly, avoiding glitches seen with the standard select.
* Uses HTML to render the values: you can provide cell renderers to customise what each value looks like.

## Customisation

### Cell Renderer

The cell renderer used within the editor can be customised as shown below:

{% gridExampleRunner title="Rich Select with Cell Renderer" name="rich-select-cell-renderer" /%}

```js
columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellRenderer: ColourCellRenderer,
        cellEditorParams: {
            values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
            cellRenderer: ColourCellRenderer,
            valueListMaxHeight: 220
        }
        // ...other props
    }
]
```

{% partial file="./_component-interface-angular.mdoc" /%}
{% partial file="./_component-interface-javascript.mdoc" /%}
{% partial file="./_component-interface-react.mdoc" /%}
{% partial file="./_component-interface-vue.mdoc" /%}

{% interfaceDocumentation interfaceName="IRichCellEditorRendererParams" config={ "description": "" } /%}

### Search Values

Different types of search are possible within the editor list as shown below:

{% gridExampleRunner title="Rich Select Editor" name="rich-select-search-values" /%}

```js
columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellRenderer: ColourCellRenderer,
        cellEditorParams: {
            values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
            allowTyping: true,
            filterList: true,
            highlightMatch: true,
            valueListMaxHeight: 220
        }
        // ...other props
    }
]
```

### Allow Typing

The editor input can be configured to allow text input, which is used to match different parts of the editor list items as shown below:

{% gridExampleRunner title="Rich Select Editor" name="rich-select-allow-typing" /%}

```js
columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellRenderer: ColourCellRenderer,
        cellEditorParams: {
            values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
            allowTyping: true,
            filterList: true,
            highlightMatch: true,
            valueListMaxHeight: 220
        }
        // ...other props
    }
]
```

### Format Values

Items in the editor list can be formatted as shown below:

{% gridExampleRunner title="Rich Select Format Values" name="rich-select-format-values" /%}

```js
columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            values: ['English', 'Spanish', 'French', 'Portuguese', '(other)'],
            formatValue: value => value.toUpperCase()
        }
        // ...other props
    }
]
```

### Complex Objects

When working with complex objects, a `formatValue` callback function is required to convert that complex object into a string that can be rendered by the Rich Select Editor.
If the `Grid Column` being edited is not using complex values, or if the Rich Select Editor value object has a different format (different properties) than the object
used by the `Grid Column`, a `parseValue` callback function is required to convert the editor format into the grid column's format.

{% note %}
When working with `Cell Renderers`, a `formatValue` callback should still be provided so it will be possible to use functionality that 
relies on string values such as `allowTyping`.
{% /note %}


{% gridExampleRunner title="Rich Select Editor" name="rich-select-complex-objects" exampleHeight=300 /%}

```js
const colors = [
  { name: "Pink", code: "#FFC0CB" },
  // ...other values
];

columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        valueFormatter: (p) => `${p.value.name} (${p.value.code})`,
        valueParser: (p) => p.newValue,
        cellEditorParams: {
            values: colors,
            formatValue: (v) => v.name,
            allowTyping: true,
            filterList: true,
        }
        // ...other props
    }
]
```

## Multi Selection

The editor can be configured to allow the selection of multiple values as shown below: 

{% gridExampleRunner title="Rich Select Editor" name="rich-select-multi-select" /%}

```js
columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
            multiSelect: true,
            searchType: 'matchAny',
            filterList: true,
            highlightMatch: true,
            valueListMaxHeight: 220
        }
        // ...other props
    }
]
```


## Async Values

List values can be provided asynchronously to the editor as shown below:

{% gridExampleRunner title="Rich Select Async Values" name="rich-select-async-values" /%}

For example:

```ts
function fetchLanguages(_params: RichCellEditorValuesCallbackParams): Promise<string[]> {
  return new Promise((resolve) => {
    setTimeout(() => resolve(['English', 'Spanish', 'French', 'Portuguese', '(other)']), 1000);
  });
}
```

```js
columnDefs: [
    {
        headerName: 'Language',
        field: 'language',
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            values: fetchLanguages,
        }
    }
]
```

### Async Filtering

For advanced filtering scenarios, combine async `values` callback, `allowTyping`, and `filterListAsync` to enable async filtering. This is shown in the example below:

{% gridExampleRunner title="Rich Select Async Filtering" name="rich-select-full-async-values" /%}

When `filterListAsync` is set to `true`, the cell editor behaves as follows:

- It calls the `values` callback with the current search term.
- It delays the search request by 300ms (this can be adjusted using `searchDebounceDelay`) to avoid excessive calls.
- A loading indicator appears while the network request is in progress.
- Once the promise resolves, the dropdown is updated with the filtered results.

For example:

```ts
function fetchLanguages(params: RichCellEditorValuesCallbackParams): Promise<string[]> {
    return fetch(`/api/languages?search=${encodeURIComponent(params.search)}`)
        .then(res => res.json())
        .then(data => data.items as string[]);
}
```

```js
columnDefs: [
    {
        headerName: 'Language',
        field: 'language',
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            allowTyping: true,
            filterList: true,
            filterListAsync: true,
            values: fetchLanguages
        }
    }
]
```
 
## API Reference


{% interfaceDocumentation interfaceName="IRichCellEditorParams" overrideSrc="provided-cell-editors-rich-select/rich-select.json" /%}

Continue to the next section: [Number Cell Editor](./provided-cell-editors-number/).
